<template>
    <scroll-view scroll-y="false" class="big-box">
        <view class="info">
            <view class="company-box">
                <text class="company-label">物流公司</text>
                <choiceMenu ref="company" choiceHint="请选择物流公司" :choiceList="expressList" :express="express">
                </choiceMenu>
            </view>
            <view class="title-box">
                <text class="title-label">标题</text>
                <input v-model="infoList.Title" class="title-input" placeholder="请输入标题" />
            </view>
            <template-info
                ref="child"
                :freeShippingList="freeShippingList"
                :chargingList="chargingList"
                :model="model"
                class="template-info"></template-info>
        </view>
        <view class="special-area-box" v-if="id > 0">
            <text class="special-area-label">特殊地区邮费</text>
            <view
                class="area-add-box"
                @click="easyGoTo('/pages_supplier/packet/freightTemplate/addRegion?type=0&id=' + id)">
                <uni-icons type="plusempty" size="40"></uni-icons>
                <text class="special-area-add">添加</text>
            </view>
        </view>
        <view v-if="loadareaList">
            <custom-area-item v-for="(item, index) in areaList" :item="item" :postageTemplateId="id"></custom-area-item>
        </view>
    </scroll-view>
</template>

<script>
import freightHead from "@/pages_supplier/components/freightTemplate/freight-head.vue"
import choiceMenu from "@/pages_supplier/components/freightTemplate/choice-menu.vue"
import templateInfo from "@/pages_supplier/components/freightTemplate/template-info.vue"
import customAreaItem from "@/pages_supplier/components/freightTemplate/custom-area-item.vue"

import appMixin from "@/utils/appMixin.js"
import {
    GetPostageTemplateInfo,
    SavePostageTemplate,
    GetPostageAreaPageList,
} from "@/pages_supplier/service/api/postage.js"
import { GetExpressList } from "@/pages_supplier/service/api/supplier.js"
export default {
    data() {
        return {
            freeShippingList: ["不包邮", "按件包邮", "按金额包邮", "按重量包邮", "全场包邮"],
            chargingList: ["计件", "计重", "计体积"],
            model: 0,
            id: 0,
            loadareaList: false,
            expressList: [],
            infoList: [],
            express: {},
            areaList: [],
        }
    },
    components: {
        freightHead,
        choiceMenu,
        templateInfo,
        customAreaItem,
    },
    computed: {},
    methods: {
        getExpList() {
            let path = "?isRefund=false"
            GetExpressList(path).then((res) => {
                this.express = res.Data

                res.Data.forEach((e) => {
                    this.expressList.push(e.Name)
                })
            })
        },
        SavePostageTemplate() {
            let param = this.$refs.child.uploadInfo()
            if (this.$refs.company.upData(1) > -1) {
                param.ExpressId = this.express[this.$refs.company.upData(1)].ID
            }
            param.title = this.infoList.Title
            if (!param.ExpressId) {
                this.easyToast("请选择物流公司")
                return
            } else if (!param.title) {
                this.easyToast("请输入标题")
                return
            } else if (!param.PinkageType && param.PinkageType != 0) {
                this.easyToast("请选择包邮方式")
                return
            }

            SavePostageTemplate(param).then((res) => {
                if (res.State == 1) {
                    this.easyGoBack(1)
                    this.$forceUpdate()
                } else {
                    uni.showToast({
                        title: res.Msg,
                        icon: "error",
                    })
                }
            })
        },
        GetPostageTemplateInfo(id) {
            let data = {
                id: id,
            }
            GetPostageTemplateInfo(data).then((res) => {
                if (res.State == 1 && res.Data && id > 0) {
                    this.infoList = res.Data
                    this.$refs.child.load(res.Data)
                    this.$refs.company.preload(this.infoList.ExpressId, this.getIndex())
                } else {
                    uni.showToast({
                        title: res.Msg,
                        icon: "error",
                    })
                }
            })
        },
        getIndex() {
            for (let i = 0; i < this.express.length; i++) {
                if (this.express[i].Name == this.infoList.ExpressName) {
                    return i
                }
            }
        },
        getAreainfo() {
            let param = {
                postageTemplateId: this.id,
                pageIndex: 1,
                pageSize: 50,
            }
            GetPostageAreaPageList(param).then((res) => {
                if (res.State == 1) {
                    this.areaList = res.Data
                    this.loadareaList = true
                } else {
                    this.eastToast(res.Msg)
                }
            })
        },
    },
    onReady() {},
    onLoad(data) {
        this.getExpList()
        this.model = data.type
        this.id = data.id
    },
    mounted() {
        this.$nextTick(function () {
            if (this.id > 0) {
                this.GetPostageTemplateInfo(this.id)
            }
        })
    },
    onShow() {
        this.loadareaList = false
        this.getAreainfo()
    },
    onNavigationBarButtonTap(e) {
        this.SavePostageTemplate()
    },
}
</script>
<style lang="scss">
.big-box {
    height: 100vh;
    box-sizing: border-box;
    padding-top: 20rpx;
}

.info {
    background-color: $color-white;
    padding-top: 20rpx;
}

.special-area-add {
    font-size: 30rpx;
}

.special-area-label {
    text-align: center;
    padding: 30rpx 0;
    font-size: 30rpx;
}

.area-add-box {
    display: flex;
    align-items: center;
}

.special-area-box {
    background-color: $color-white;
    margin-top: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30rpx;
}

%left-style {
    font-size: 30rpx;
    padding: 16rpx 0;
    margin-bottom: 32rpx;
    width: 150rpx;
    margin-left: 30rpx;
}

.company-label {
    @extend %left-style;
}

.title-label {
    @extend %left-style;
}

%box {
    display: flex;
}

.company-box {
    @extend %box;
}

.title-box {
    @extend %box;
}

%right-style {
    font-size: 30rpx;
    background-color: $app-color-input-bg;
    padding: 16rpx 0 16rpx 20rpx;
    margin-right: 30rpx;
    margin-bottom: 30rpx;
    display: flex;
    margin-left: 20rpx;
}

.title-input {
    flex: 1;
    @extend %right-style;
}
</style>
